<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

</head>

<body>
	<div class="login-container">
		<h2>登录</h2>
		<form id="loginForm" onsubmit="login()">
			<label for="username">用户名：</label>
			<!-- 校验 -->
			<input type="text" id="username" onblur="onBlur()" onfocus="onFocus()" name="username" required>

			<br>
			<label for="password">密码：</label>
			<input type="password" id="password" name="password" required />
			<br>
			<button type="submit">登录</button>
		</form>
		<div id="message"></div>
	</div>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
		let obj = {
			username: 'zhangsan',
			password: '123'
		};
		function login() {

			const username = document.getElementById('username');
			const password = document.getElementById('password');
			obj.username = username.value;
			obj.password = password.value;
			/* 阻止默认事件 */
			window.event.preventDefault();
			axios.post('http://localhost:3000/login?id=1', obj).then(res => {
				console.log(res);
			})
		}
		const onFocus = () => {
			console.log('聚焦');
		}
		const onBlur = () => {
			console.log('失焦');
		}

	</script>
</body>

</html>